<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="/js/echarts.min.js"></script>
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="layui-form-item">

    <div class="wrapper wrapper-content ">
        <div class="col-sm-12">

            <input type="hidden" th:value="${accommodationCount}" id="accommodationCount"/>
            <input type="hidden" th:value="${diningRoomCount}" id="diningRoomCount"/>
            <input type="hidden" th:value="${accommodationFood}" id="accommodationFood"/>

            <div class="ibox">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 600px;height:400px;"></div>

                <div class='col-sm-6'>
                   <!-- <div class="form-group">
                        <label>选择开始时间：</label>
                        &lt;!&ndash;指定 date标记&ndash;&gt;
                        <div class='input-group date' id='datetimepicker1'>
                            <input id="beginTime" type='text' class="form-control"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>-->
                    </div>
                </div>
                <div class='col-sm-6'>
                   <!-- <div class="form-group">
                        <label>选择结束时间：</label>
                        &lt;!&ndash;指定 date标记&ndash;&gt;
                        <div class='input-group date' id='datetimepicker2'>
                            <input id="endTime" type='text' class="form-control"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>-->
                </div>

                <div class="ibox-body">
                    <div class="fixed-table-toolbar">
                        <div class="columns pull-left">
                           <!-- <button shiro:hasPermission="farm:farmShop:batchRemove" type="button"
                                    class="btn  btn-danger"
                                    onclick="batchRemove()">
                                <i class="fa fa-trash" aria-hidden="true"></i>删除
                            </button>-->
                        </div>
                        <div class="columns pull-right">
                           <!-- <button class="btn btn-success" onclick="reLoad()">查询</button>-->
                        </div>
                        <div class="columns pull-right col-md-2 nopadding">
                            <!--<input id="searchName" type="text" class="form-control"
                                placeholder="">-->
                        </div>
                    </div>
                 <!--   <table id="exampleTable" data-mobile-responsive="true">
                    </table> -->
                </div>
            </div>
        </div>
    </div>
    <!--shiro控制bootstraptable行内按钮看见性 来自bootdo的创新方案 -->
    <div>
       <!-- <script type="text/javascript">
            var s_edit_h = 'hidden';
            var s_remove_h = 'hidden';
            var s_resetPwd_h = 'hidden';
        </script>-->
    </div>
   <!-- <div shiro:hasPermission="farm:farmShop:edit">
        <script type="text/javascript">
            s_edit_h = '';
        </script>
    </div>-->
    <!--<div shiro:hasPermission="farm:farmShop:remove">
        <script type="text/javascript">
            var s_remove_h = '';
        </script>
    </div>-->
</div>
<div th:include="include :: footer"></div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    window.onload = function (){
        var   accommodationCount =$("#accommodationCount").val();
        var  diningRoomCount =$("#diningRoomCount").val();
        var accommodationFood =$("#accommodationFood").val();

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '审核通过农家统计来源',
                subtext: '线上商城',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['美食+住宿',/*'邮件营销','联盟广告',*/'美食','住宿']
            },
            series : [
                {
                    name: '来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:accommodationFood, name:'美食+住宿'},
                        /*  {value:310, name:'邮件营销'},
                          {value:234, name:'联盟广告'},*/
                        {value:diningRoomCount, name:'美食'},
                        {value:accommodationCount, name:'住宿'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }









   /* $(function () {
        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: moment.locale('zh-cn')
        });
        //动态设置最小值
        picker1.on('dp.change', function (e) {
            picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function (e) {
            picker1.data('DateTimePicker').maxDate(e.date);
        });
    });*/
</script>
</body>
</html>